/*
 * @Description: 车辆信息组件，包含车辆名与经过站点
 * @Author: shuaishuai.wang
 * @Date: 2019-08-21 09:40:21
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-11-01 14:04:11
 */
<template>
  <!-- <div
    class="line_main fontsize32"
    tabindex="0"
    @blur="toggleList = false"
    hidefocus="true"
  > -->
  <div
    class="line_main fontsize32"
    tabindex="0"
    hidefocus="true"
  >
    <div
      class="change_icon flex-h flex-vc"
      v-if="canChange"
      @click="changeDirection()"
    >
      <i class="iconfont icon-change fontsize48"></i>
      <div
        class="fontsize16"
        style="line-height:16px;"
      >换<br />向</div>
    </div>
    <div class="line_info">
      <div class="station flex-h flex-vc">
        <i class="iconfont icon-shi  fontsize48"></i>
        <span>{{stationInfo.START_STATION}}</span>
      </div>
      <div
        class="station_list"
        @click="switchStation()"
      >
        <!-- <div
          class="station_num"
          :style="{height: (toggleList ? 0 : numHeight)}"
        > -->
        <div
          class="station_num"
          :style="{height: (toggleList ? 0 : 'auto')}"
        >
          <span>{{stationInfo.VIA_STATION_COUNT | stationFilters}}</span>
          <i
            class="iconfont icon-unflod"
            v-show="stationInfo.VIA_STATION_COUNT!==0"
          ></i>
        </div>
        <!-- <div
          class="station_way"
          :style="{height: (toggleList ? wayHeight': 0)}"
        > -->
        <div
          class="station_way"
          :style="{height: (toggleList ? 'auto' : 0)}"
        >
          <p
            v-for="(name, index) in stationInfo.VIA_STATION_LIST"
            :key="index"
          >{{name}}</p>
        </div>
      </div>
      <div class="station flex-h flex-vc">
        <i class="iconfont icon-zhong fontsize48"></i>
        <span>{{stationInfo.END_STATION}}</span>
      </div>
      <div class="long_string"></div>
    </div>
    <div
      @click="goToMap"
      class="map_icon"
    >
      <i class="iconfont icon-ditu-01 fontsize48"></i>
    </div>
  </div>
</template>

<script>
import { getRouteStationName } from './../../interface/getInterface'
import { stationFilters } from './../../filters/filters'
export default {
  props: {
    parentDirection: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      toggleList: false, // 总站数与具体站名的切换状态
      // wayHeight: 0, // 具体站名所在div高度
      // numHeight: '', // 总站数所在div高度,
      stationInfo: {}, // 当前线路站点详情
      canChange: false, // 是否可以切换线路
      direction: 1, // 上下行
      route: JSON.parse(window.localStorage.getItem('route')) // 缓存中线路相关数据
    }
  },
  mounted() {
    this.direction = this.parentDirection
    // this.direction = this.route.DIRECTION_LIST[0]
    this.getLineInfo()
  },
  methods: {
    goToMap() {
      this.$router.push({ name: 'map', params: { DIRECTION: this.direction, ROUTE_ID: this.route.ROUTE_ID } })
    },
    changeDirection() {
      this.direction = (this.direction === 1 ? 2 : 1)
      this.getLineInfo()
      this.$emit('changeDirection', this.direction)
    },
    getLineInfo() {
      // let size = parseFloat(document.getElementsByTagName('html')[0].style.fontSize) // 获取当前根字体大小
      // this.numHeight = 0.746667 * size + 'px' // 计算站点数div高度
      this.canChange = this.route.DIRECTION_LIST.length === 2
      let params = {
        DIRECTION: this.direction || this.route.DIRECTION_LIST[0],
        ROUTE_ID: this.route.ROUTE_ID
      }
      getRouteStationName(params).then(data => {
        this.stationInfo = data
        // this.wayHeight = data.VIA_STATION_LIST.length * 0.533333 * size + 'px' // 计算中间站点div高度
        this.$emit('closeLoading')
      }).catch(() => {
        this.showToast('数据获取错误')
      })
    },
    switchStation() { // 展开、折叠站点
      // 途径站点大于0触发
      if (this.stationInfo && this.stationInfo.VIA_STATION_LIST && this.stationInfo.VIA_STATION_LIST.length > 0) {
        this.toggleList = !this.toggleList
      }
    }
  },
  filters: {
    stationFilters
  }
}
</script>

<style lang="scss" scoped>
.line_main {
  width: 686px;
  background: linear-gradient(
    90deg,
    rgba(39, 132, 255, 1) 0%,
    rgba(78, 129, 250, 1) 100%
  );
  border-radius: 4px; /*no*/
  margin: auto;
  margin-bottom: 32px;
  color: #fff;
  position: relative;
  outline: none;
  .change_icon {
    width: fit-content;
    height: fit-content;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 16px;
    margin: auto;
  }
  .line_info {
    padding: 28px 0;
    padding-left: 96px;
    .station {
      i {
        height: 44px;
        line-height: 44px;
        display: inline-block;
        position: relative;
        top: 4px;
      }
      span {
        width: 450px;
        height: 44px;
        line-height: 44px;
        display: inline-block;
        padding-left: 24px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .station_list {
      padding: 10px 0;
      padding-left: 80px;
      .station_num {
        // transition: all 0.5s;
        overflow: hidden;
        i {
          height: 56px;
          line-height: 56px;
          display: inline-block;
        }
        span {
          height: 56px;
          line-height: 56px;
          display: inline-block;
          font-size: 32px;
        }
      }
      .station_way {
        height: 0;
        overflow: hidden;
        // transition: all 0.5s;
        p {
          height: 48px;
          line-height: 48px;
          font-size: 24px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
    .long_string {
      width: 6px;
      height: calc(100% - 130px);
      background-color: #fff;
      position: absolute;
      left: 116px;
      top: 64px;
    }
  }
  .map_icon {
    position: absolute;
    top: 28px;
    right: 34px;
  }
}
</style>
